<template>
	<view class="ec-view-box">
		<view class="ec-view-box-title flex-bt">
			<view class="flex-cc">
				<image src="../../static/image/home/wave.png" mode="widthFix" style="width: 40rpx" class="ml10" />
				<text style="color: #353535" class="ml10 fw600">雨量站：{{ info.data.name }} {{ info.data.id }}</text>
			</view>
		</view>
		<view class="live-box-z-q">
			<view class="flex-bc">
				<view>
					<text class="title">起止时间</text>
					<text class="ml15 fs26">
						<text @click="changeTime('begin')">{{ begin }}</text>
						<text class="ml10 mr10">~</text>
						<text @click="changeTime('end')">{{ end }}</text>
					</text>
				</view>
				<view class="time">
					<i class="iconfont icon-calendar"> </i>
				</view>
			</view>
			<view class="flex-bc">
				<view>
					<text class="title">本时次雨量:</text>
					<text class="ml15 value">{{ drp.value }}mm</text>
				</view>
				<view class="time">{{ drp.time }}</view>
			</view>
		</view>
		<view style="width: 100%; height: 400rpx" class="mt15">
			<waterEc :options="ecData"></waterEc>
		</view>
		<u-picker
			mode="time"
			:default-time="showTimeValue"
			v-model="timeShow"
			:params="timeParams"
			@confirm="confirmTime"
		></u-picker>
	</view>
</template>
<script>
	import controlApi from '@/api/monitor/control.js'
	import moment from 'moment'
	export default {
		name: 'ec',
		props: {
			nodeId: {
				type: null,
				default: null
			}
		},
		components: {
			'block-card': () => import('@/components/home/block-card.vue'),
			waterEc: () => import('@/components/home/waterEc.vue')
		},
		data() {
			return {
				table: [],
				ecData: {},
				info: {
					data: {}
				},
				drp: {
					time: '',
					value: ''
				},

				begin: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:00'),
				end: moment().format('YYYY-MM-DD HH:mm:00'),
				timeShow: false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				showTimeValue: this.end
			}
		},
		methods: {
			async init() {
				const info = await controlApi.getInfo({
					projectId: '3bc0fb05339a46d7966a7abac9fc3516',
					nodeId: this.nodeId,
					nodeType: 'WPStationPP'
				})
				this.info = info.data
				const monitorData = await controlApi.getMonitorData({
					projectId: '3bc0fb05339a46d7966a7abac9fc3516',
					nodeId: this.nodeId,
					nodeType: 'WPStationPP',
					begin: this.begin,
					end: this.end
				})
				const { table, option } = this.dealDataEv(info.data, monitorData.data)
				this.ecData = option
				let drp = monitorData.data.drp || []
				if (drp.length > 0) {
					this.drp = drp[drp.length - 1]
				}
			},
			dealDataEv(info, monitorData, isWater = true) {
				// outq:出库流量，inq:入库流量，q:流量，z:水位，drp：雨量
				// , inq: '入库流量', q: '流量', z: '水位', drp: '雨量'
				const typeObj = {
					drp: { name: '累计雨量', color: '#0085FF' }
				}

				// 图块 和图表数据，最后返回这两个
				let table = []
				let option = {}

				// 先处理时间
				Object.keys(monitorData).forEach((key) => {
					monitorData[key].map((t) => {
						t.time = moment(t.time).format('YYYY-MM-DD HH:mm')
						return t
					})
				})
				// 处理图表
				let xdata = []
				const series = []
				const legendName = []

				Object.keys(monitorData).forEach((key) => {
					let obj = typeObj[key]
					legendName.push(obj.name)

					let sinOps = {}
					// 雨量是柱状图
					sinOps = {
						name: obj.name,
						data: monitorData[key].map((e) => e.value || '-'),
						symbol: 'none',
						itemStyle: {
							color: obj.color,
							lineStyle: {
								width: 2,
								color: obj.color
							}
						},
						type: 'bar',
						smooth: true
					}

					series.push(sinOps)
					// xdata长度
					xdata = monitorData[key].map((item) => item.time)
				})

				option = {
					xAxis: {
						data: xdata,
						axisLabel: {
							show: true,
							showMaxLabel: true,
							textStyle: {
								color: '#A0A0A0'
							},
							formatter: function (value, index) {
								return moment(value).format('HH:mm')
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#A0A0A0',
								width: 1
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#A0A0A0',
								width: 1
							}
						},
						// name: "日期",
						axisTick: {
							show: false
						},
						type: 'category',
						nameTextStyle: {
							color: '#A0A0A0'
						}
					},
					yAxis: [
						{
							max: function (value) {
								return parseInt(value.max) + 10
							},
							// min: function (value) {
							// 	if (value.min < 10) {
							// 		return 0
							// 	}
							// 	return parseInt(value.min)
							// },
							axisLabel: {
								show: true,
								textStyle: {
									color: '#A0A0A0'
								}
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: '#A0A0A0',
									width: 1
								}
							},
							name: '雨量(mm)',
							axisTick: {
								show: false
							},
							splitLine: {
								lineStyle: {
									color: '#A0A0A0',
									width: 1
								}
							},
							type: 'value',
							nameTextStyle: {
								color: '#A0A0A0'
							}
						}
					],
					legend: {
						data: legendName,
						bottom: '0',
						textStyle: {
							fontSize: 10
						}
					},
					tooltip: {
						trigger: 'axis',
						formatter: (params) => {
							var relVal = params[0].name
							for (var i = 0, l = params.length; i < l; i++) {
								let unit = 'mm'
								if (['流量', '出库流量', '入库流量'].includes(params[i].seriesName)) {
									unit = 'm³/s'
								}
								relVal += '<br/>' + params[i].marker + params[i].seriesName + ':' + (params[i].value || '-') + unit
							}
							return relVal
						}
					},
					grid: {
						top: '15%',
						left: '10%',
						bottom: '24%',
						right: '10%'
					},
					series: series
				}
				return { table, option }
			},
			changeTime(value) {
				this.timeTpye = value
				if (value == 'begin') {
					this.showTimeValue = this.begin
				} else {
					this.showTimeValue = this.end
				}
				this.timeShow = true
			},
			confirmTime(value) {
				let time = `${value.year}-${value.month}-${value.day} ${value.hour}:${value.minute}:00`
				let timtM = moment(time)
				if (this.timeTpye == 'begin') {
					if (timtM.isAfter(moment(this.end))) {
						uni.showToast({
							icon: 'error',
							title: '起始时间小于结束时间',
							duration: 1500
						})
						return
					} else {
						this.begin = time
					}
				} else {
					if (timtM.isBefore(moment(this.begin))) {
						uni.showToast({
							icon: 'error',
							title: '结束时间大于起始时间',
							duration: 1500
						})
						return
					} else {
						this.end = time
					}
				}
				this.timeShow = false
				this.init()
				console.info(`value:`, time)
			}
		},
		computed: {},
		mounted() {
			this.$nextTick(() => {
				this.init()
			})
		}
	}
</script>
<style lang="less" scoped>
	.ec-view-box {
		width: 100%;
		height: 100%;
		padding-top: 15rpx;
		.ec-view-box-title {
			width: 691rpx;
			margin: 0 0 15rpx 15rpx;
			height: 58rpx;
			border-radius: 10rpx;
			.btn-more {
				// width: 105rpx;
				height: 40rpx;
				background: #eaf2ff;
				border: 1rpx solid #0085ff;
				border-radius: 39rpx;
				padding: 10rpx 20rpx;
				color: #0085ff;
				font-size: 22rpx;
				font-weight: 600;
			}
		}
	}
	.live-box-z-q {
		display: flex;
		width: 100%;
		padding: 0 5rpx;
		flex-direction: column;
		.flex-bc {
			width: 96%;
			padding: 0 3rpx;
			margin: 0 auto;
			align-items: center;
			height: 49rpx;
			background: #f9fbff;
			backdrop-filter: blur(21.5rpx);
			/* Note: backdrop-filter has minimal browser support */
			border-radius: 10rpx;
			margin-bottom: 7rpx;
		}
		.title {
			color: #6c6c6c;
			font-size: 24rpx;
		}
		.value {
			color: #0085ff;
			font-size: 24rpx;
			font-weight: 600;
		}
		.time {
			color: #0085ff;
			font-weight: 600;
			font-size: 24rpx;
		}
	}
</style>
